<template>
	<div class='transform-plan-younger'>
		<TopNav
			color="#00493E"
			msgColor="#01937C"
			:showTitle="false"
			showBack
			showCollect
			:backColor="course.bgMap.backIconColor"
		/>
		<!-- 背景图 -->
		<div class="background">
			<div class="background-content">
				<div
					:style="{
						'color': course.bgMap.nameColor,
						'text-shadow': `2px 3px ${course.bgMap.nameShadowColor}`,
					}"
					class="name"
				>
					{{course.bgMap.name}}
				</div>
				<div class="tags">
					<Tag
						class="tag"
						v-for="tag in course.bgMap.tags"
						:key="tag.name"
						:bgColor="tag.bgColor"
						:color="tag.color"
					>
						{{tag.name}}
					</Tag>
				</div>
				<div
					:style="{
						'color': course.bgMap.descColor,
					}"
					class="desc"
					v-html="course.bgMap.desc"
				/>
				<div class="btns">
					<Button
						radius="40"
						width="180"
						height="48"
						@click="$pushTo('CourseDetail', {id})"
					>
						<Iconfont
							name="icon-a-Group11"
							size="20"
						/>
						去改造
					</Button>
					<Button
						style="margin-left: 15px;"
						radius="40"
						width="110"
						height="48"
						:color="course.bgMap.collectBtnColor"
						:bgColor="course.bgMap.collectBtnBgColor"
						:border="course.bgMap.collectBtnBorder"
					>
						<Iconfont
							name="icon-Group"
							size="20"
							:color="course.bgMap.collectBtnColor"
						/>
						收藏
					</Button>
				</div>
			</div>
			<img
				style="width: 100%;"
				:src="course.bgMap.img"
			>
		</div>
		<div class="container">
			<div class="navs">
				<Button
					class="nav"
					v-for="nav in navs"
					:key="nav.key"
					width="160"
					height="48"
					:bgColor="selectNav === nav.key ? '#00C9A9' : '#EFF3F3'"
					:color="selectNav === nav.key ? '#FFFFFF' : 'rgba(0, 0, 0, 0.55)'"
					@click="selectNav = nav.key"
				>
					{{nav.label}}
				</Button>
			</div>
			<component
				style="flex: 0 0 auto;"
				:is="navs.find(item => item.key === selectNav).component"
				:role="role"
				:course="course"
			/>
		</div>
	</div>
</template>

<script>
import { getCourse } from '@/api/course'
import StepsChild from './components/StepsChild'
import Works from './components/Works'
import QA from './components/QA'

export default {
  components: {
    StepsChild,
    Works,
    QA
  },
  props: {
    role: {
      type: String,
      default: 'parent'
    }
  },
  data() {
    return {
      navs: [
        { label: '改造要求', key: 'askFor', component: 'StepsChild' },
        { label: '改造作品', key: 'works', component: 'Works' },
        { label: '常见问题', key: 'QA', component: 'QA' },
      ],
      selectNav: 'askFor',
      id: '',
      course: null
    }
  },
  created() {
    this.id = this.$route.query.id
    this.course = getCourse(this.id)
    console.log(this.course)
  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
.transform-plan-younger {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: #1f6dbc;

  .background {
    position: relative;

    .background-content {
      position: absolute;
      top: 80px;
      left: 110px;
      z-index: 10;
      white-space: pre-line;

      .name {
        font-size: 54px;
        color: #ffffff;
        text-shadow: 2px 3px  #f1b3ad;
      }

      .tags {
        display: flex;
        margin: 15px 0 30px;

        .tag {
          &:not(:last-of-type) {
            margin-right: 8px;
          }
        }
      }

      .desc {
        margin-bottom: 20px;
        font-size: $sSmall;
        line-height: 26px;
        color: #ffffff;
      }
    }
  }

  .container {
    position: absolute;
    top: 400px;
    bottom: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 24px 5%;
    overflow-y: auto;
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;

    .navs {
      display: flex;
      justify-content: center;
      width: 100%;
      padding-bottom: 54px;
      margin-bottom: 33px;
      border-bottom: 1px dashed rgba(0, 62, 52, 0.2);

      .nav {
        margin-right: 24px;
      }
    }
  }
}
</style>
